<!-- eslint-disable -->
<template>
    <el-form  :model="form" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="name" disabled style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input  v-model="gender" style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="年龄">
        <el-input  v-model="age" style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="部门">
        <el-input  v-model="department" style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="kpi">
        <el-input  v-model="kpi" style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="地址">
        <el-input  v-model="address" style="width: 500px;"></el-input>
      </el-form-item>
      <!-- <el-form-item label="所属项目">
        <el-select v-model="group" placeholder="请选择" style="width: 200px;">
          <el-option v-for="item in projects" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
      <el-button type="primary" @click="updateData">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import { useRouter} from 'vue-router';
  import { useRoute} from 'vue-router';
  const router =useRouter()
  
let name=ref('')
let gender=ref('')
let age=ref('')
let department=ref('')
let kpi=ref('')
let address=ref('')

let des=ref('')
let group=ref('')
let updateId=ref('')

  
  //新增数据提交表单对象
  let form = ref({
    age:age,
    gender:gender,
    department:department,
    kpi:kpi,
    address:address
  });
  
  const moduleName = ref([
    { value: '用户', label: '用户' },
    { value: '订单', label: '订单' },
    { value: '商品', label: '商品' },
    { value: '后台运营', label: '后台运营' },
  ]);
  const projects = ref([
    { value: '电商', label: '电商' },
    { value: '贷款', label: '贷款' },
    { value: '直播', label: '直播' },
    { value: '游戏', label: '游戏' },
  ]);
  
  // 页面数据展示
onMounted(() => {
const route = useRoute();
updateId.value=route.params.id
 search()
  });
  
  
  //搜索
  function search() {
    axios.get('http://localhost:8000/test/getiteminfo/' + updateId.value)
      .then(response => {
        name.value = response.data.name
        gender.value=response.data.gender
        age.value=response.data.age
        department.value=response.data.department
        kpi.value=response.data.kpi
        address.value=response.data.address
  
      })
      .catch(error => {
        console.error("Error fetching data:", error); // 请求失败时打印错误信息
      });
  }
  //更新表单
function updateData(){
   axios.put('http://localhost:8000/test/updateemployee/' + updateId.value ,form.value)
   .then(res => {
    console.log(res)
    router.push('/employeelist');
   })
   .catch(err => {
    console.error(err); 
   })
 }

 


  </script>